Headless PWA For Magento 2

Introduction- Headless PWA

The Headless Progressive Web Application (PWA) for Magento 2 uses web compatibilities to provide mobile application experiences to users.

The headless PWA’s are instantly discoverable and useable via browsers. Thus, eliminating the need to download the application before starting using it.

The front-end of this headless PWA is completely built on React-JS, hence this makes it easily customizable and provides a better experience to its users.

Headless PWA’s design in such a way to offer clients the same experience as a native Android or iOS application. So, it is a regular website instead of a separate application.

This Module is built on headless Magento 2 PWA Studio (A suite of tools by Magento for building a web store to a Progressive Web Application). 

Learn to create your Magento 2 Headless Website utilizing the top 5 best Headless frameworks for Magento 2. 

Check the headless PWA App flow –

NOTE:

You must need to have Magento 2.3.* for using this application & their corresponding PWA versions.

Please check the image shown below for the compatibility of the Magento version with the PWA studio version. 

Magento 2 is shifting towards the PWA platform and natively supports the headless Magento 2 (Adobe Commerce).

PWA’s are the future of web application development. So, PWA is the right step to give the web store app-like experiences. 

PWA Studio gives front-end developers an open-ended toolkit for creating PWA themes for Magento 2.

Thus, it requires less development effort to build in comparison to a traditional standalone application.

Features

Following are the features of the Magento2 PWA (Pwa-Studio):

• PWA’s provide a great experience to the users as it is lightweight and super fast.
• PWA’s are easily accessible in poor connectivity.
• Easy to customize because the frontend is built on React JS.
• PWA app supports the amazing feature called PWA Scan & Go by which the customer can instantly scan up the barcode associated with the product and add the product to the cart and with ease pay for the product from the application itself.
• The PWA supports Push Notifications.
• The Progressive Web App can also be operational during the offline mode (Coming Soon).
• Supports various devices including Android and iOS.
• The App is purely responsive on all the platforms and it provides cross-browser compatibility.
• The Progressive Web Application will give the feel of a native App.
• Since it is not a native application so there will be updating issues.
• The PWA’s are easy to install since the user just has to visit the site and add it to the home screen.
• No App store is required for managing the application.
• The App provides a better User Interface which leads to increased traffic to the store.
• The Admin can set the user name and password from the backend.
• The Splash Background image of the application can also be set by the admin.
• The Admin can manage or add the banner images, notifications, featured categories, category’s banner images, and icons.
• The product type supported is Simple and Configurable. 
• The carousel and carousel images can also be managed and added by the Admin.

Note 

• The Magento 2 Headless PWA will support only simple and configurable product types. 
• For the payment methods, we only provide the Cash On Delivery method with the module.
• In case any other payment method is required then we need to check its feasible APIs or package in reacting and then we can implement the same.  

Installation Steps

The installation of PWA (PWA Studio) for the Magento2 module is very easy.

You need to Unzip the respective extension zip and then move the “app” folder (inside the “src” folder) into the Magento2 root directory as per the screenshot.

After the successful installation, you have to run the following commands in the Magento2 root directory.

First command –

php bin/magento setup:upgrade

Second Command –

php bin/magento setup:di:compile

Third Command –

php bin/magento setup:static-content:deploy

After running these commands, you have to log in to the admin panel then have to clear the Cache.

For reference check the below screenshot.

For setting up Magento 2.3 PWA Studio, check the link below:

https://webkul.com/blog/magento2-3-pwa-studio-setup/

Now move the “packages” folder (inside “pwa-studio” folder) into Magento installed PWA-studio directory.

Enter the following command in package.json of pwa-studio folder:
—> under “workspace” key enter “packages/mobikul”
—> under “scripts” key enter the following command

“watch:mobikul”: “yarn workspace @magento/mobikul run watch; cd – >/dev/null”

“stats:mobikul”: “yarn workspace @magento/mobikul run build:analyze && yarn workspace @magento/mobikul run stats”

“stage:mobikul”: “yarn workspace @magento/mobikul run start; cd – >/dev/null”

However, for reference check the below link:

 In the lerna.json file of pwa-studio directory enter the following command:
             under “packages” key enter “packages/mobikul”

Now install the following packages by running the following command parallel to the pwa-studio folder:

First Command- yarn add @material-ui/core

Second Command- yarn add @material-ui/icons

Third Command- yarn add jquery

Fourth Command-  yarn add forever -g -W

Fifth Command- yarn add firebase -W 

To run the new Mobikul theme of PWA, run the following command:

i) sudo yarn run build
ii) yarn run watch: mobikul

After the successful installation of the Module the admin can configure the module from the backend as required.

For this, the admin will have to navigate through Mobikul->Mobikul Configuration as shown in the snapshot below.

Tapping the Mobikul Configuration sub-menu option, will bring up the Mobikul Basic Configuration as shown below in the snapshot.

• User Name- The Admin needs to provide the username then it is used for connecting to the respective server.
• Password- Here the admin needs to set the password which will be used with the above username for connecting to the server. 
• Collection Page Size- The size of the collection page decides, how many products are going to show on the collection page of PWA at a time.
• Enable random featured product on the home page?- Admin can Enable or Disable the featured product from the home page which will be taken on a random basis.

         Note- If the field is Disabled then, the admin needs to enable “Is featured for Mobikul ?” on the product page.

• Allowed CMS Pages- The admin can choose the CMS page which they want to display at the front-end.
• Splash Screen image- Admin can upload the splash screen image for the app.
• API key- Admin needs to provide the Server API key which they will get after the firebase console registration.

Demo Order PopUp Confirmation – Here, the admin can set the enable popup confirmation as a Yes or No as required.

FCM Push Notification Parameters – Here, enter the API Key for using the push notification feature along with the push notification Android and iOS topics.

Mobikul Catalog Search Configuration – Enable or disable the display tags in the search feature, enter the number of tags to show in the search. 

Apart from that, enable the display products in search then set the number of products to display within the search as required.

Application Download from Website –  Enable or disable the Android and iOS app download links within your website.

Set to enable the links as in top or bottom of the website and choose the applicable download link theme as required.

Mobikul Api Cache Settings –

Enable the cache for the Mobikul API along with the refresh rate. You can clear the cache any time by tapping the clear cache button.

To manage the banner images, the admin will navigate Mobikul->Manage Banner Images as per the below snapshot below.

Tapping the manage banner images brings up the section with a list of already added banner images by the admin then a button to add new banner images.

So, When the Admin hits on the Add Images button, they can see the various fields to be filled as per the below image:

Here, the admin will – 

• Upload the banner image
• Set the sort order for the uploaded banner image
• Choose the banner type as Product or Category 
• According to chosen banner type enter the product/category id to display 
• Choose the store view for displaying the banner 
• Set the banner status to enabled

Lastly, tap the Save Banner button to save the respective banner as required. 

To manage the notifications, navigate through Mobikul->Manage Notification. Here, you can manage all the notifications as required. 

To add a new notification, tap the Add Notification button then the following section appears – 

Here, add the following details for the new notification –  

• Notification Image- The Admin can set the image of the notification from here.
• Notification Title- The admin can mention the topic of notification in this section, to symbolize the notification.
• Content- The details of the notification which contain the information about the notification.
• Type of Notification- The admin can select here the notification type with which the notifications are linked. It can either- Product, category, Custom Collection, or Other types of pages.
•  Product/Category Id- If the notification is of product type the admin needs to enter the ProductId of the product. However, if the notification type is a category then provide the Category Id of the product.
• Store View- The admin can select the view for which the notification is enabled.
• Notification Status- The admin can enable or disable the notification as per the requirement.

The Progressive Web Application supports displaying and configuring featured categories.

The featured categories can easily configure from the admin panel. However, for this, the admin needs to navigate through Mobikul > Manage Featured Categories.

To add a featured category, tap on the Add Featured Category button and then fill in the required information as required.

The required information – 

• Image: The Admin can upload the featured category image from this field.
• Sort Order: This is the sort order of the featured category among other featured categories.
• Store View: The featured category can be shown store view-wise. “All Store Views” can be selected for displaying the featured category in all the store views.
• Featured Category Status: The featured category can enable or disable as per the requirement.

After that, the admin needs to choose the featured category as per the snapshot below and then save the featured category.

After adding the featured categories, check the below image for reference to how the categories get visible.

The admin can configure the banner image then the icon for each category as per the requirement.

So for configuring the category’s banner and icon, the admin needs to navigate through the following path Mobikul-> Manage Category’s Banners and Icons.

The manage section looks like the image added below and from here the admin can manage the category’s banners and icons as required.

In order to add a new category image, the admin needs to tap on the Add Images button that brings up the sections – 

Category Image Information – 

Here, the admin will – 

• Enter the icon here for the category.
• Select the view for which category image will visible. 

Categories – Here, the admin has to select the categories associated with it.

Banners – Here, the admin has to enter multiple banners from the Banner tab.

The admin can navigate to the Mobikul Order History via Mobikul->Mobikul Order History sub-menu option.

Here, the admin will find all of the orders that have been placed using the PWA app installed on mobile devices. 

The admin can add/edit carousel images by navigating through Mobikul->Mobikul Carousel Image sub-menu option as shown below in the snapshot.

In order to add a carousel image tap on the Add Images button on the top right-hand corner then which brings up the add image section as shown below in the snapshot.

Here, the admin will –  

• Choose the carousel image 
• Set the title for the carousel image 
• Choose the carousel image type as Product or Category as required
• Enter the Product/Category ids as per the selection made under the carousel image type
• Set the carousel image status to enable 

Lastly, the admin will have to tap on the Save Image button to save the respective carousel image type.

Working Of Progressive Web App

Splash Screen:

It is the launching screen of the app when the user opens up the Progressive Web Application.

Thus, this helps the application owner to introduce the app or organization.

Landing Page

Search

On clicking the search icon the app user can save their time from scrolling effort. However, the admin can search for any product via term.

Navigation Drawer

The navigation drawer has multiple options for the app user to use.

• Sign In
• Categories

Sign In

The customer can Sign In via Username or Email through the Progressive Web Application.

Create An Account

The customer can also create their account by filling up some basic details through Progressive Web Application (PWA).

Categories

Thus, the feature permits to display of all the products of the store. Along with their assigned and associated Subcategories and Parent category in the PWA too.

Categories view

Henceforth, on clicking on a particular category the PWA user will be redirected. Thus, in this section, there is a list of product collections that will visible.

Product View

The Product Page will display the details related to the products, therefore, the PWA user can scan through. The page has the following details-

• Add your Review- Post-purchase the PWA user can review the product by entering the rating.

• Edit quantity- The PWA user can edit the quantity to purchase the product from here.
• Add to Cart- The PWA user can click on the Add To Cart button to add the product to the cart for checkout.
• Buy Now- The customer can click on Buy Now Button to directly move to the checkout.
• Choose Options- If the product has multiple options associated with it app user can select them then add the product to the cart.
• Details- However here is the product complete details. This page is for the app user to refer to before purchase.

Cart And Checkout

The Product added to the cart will see by clicking on the Cart button present on the homepage.

Moreover, the cart here is just similar to the shopping trolley which is present in the physical store.

The application also allows the customers to place an order for the products on go. So, the customer needs to scan the barcode of the product and the product will add to the cart instantly.

For instance, if the customer visits the website brand physical store. However, do not want to stand up in the queue for billing, then this application will be the best choice.

Thus, the customer will open up the PWA App on mobile and click on the “Camera” option available to scan the code.

So, the customer needs to just scan the product barcode completely.

Thus, scan the barcode attached to the product and the product directly goes to the cart on the PWA app.

Now after scanning the barcode successfully the customer. Herein, customers can see the product will add to the cart & from there they can easily place the order and save time.

 

Headless PWA is heading towards fascinating features like push notifications, web Bluetooth, a complete app-like experience, etc that was not possible yet with PWA. 

TWA provides a proper process to let the progressive web apps into the android app.

It provides the user with an exact android app-like experience while they are using a PWA whereas the capabilities and characteristics are provided by the browser. 

Trusted Web Applications will publish to the Google Play Store. The publishing method is way different as here the developer creates an Android APK file wrapping up the existing PWA.  

Furthermore, there are various tools available to generate the APK. 

• Bubblewrap is a NodeJS based tool that generates applications powered by Trusted Web Activities.
• The Bubblewrap documentation is transparent for the developer and they can get started freely. 
• For the web developers having prior knowledge of android development, there is another tool for customizing their existing android app i.e. android-browser-helper.
• For more check documentation and our demos.  

Below is shown the image for headless PWA that is available in the Play store:

You can install the same for a better experience from Google Play Store.

Today, no one wants to get stuck on a specific page for getting some kind of information. For resolving this headless PWA has introduced the precaching and runtime caching feature. 

Precaching means storing the files that are not yet accessed but the expectations of searching them in recent times are the most. 

Moreover, runtime caching is preferable because it caches the data just after the customer accesses some kind of information. In this, the developer can set the limit till when the caching will be done. 

There are multiple strategies available that choose among Cache only, Network only, Cache First, Network First, and Stale while revalidating. 

Web APIs by Background Sync helps to send the right information to customers in any network conditions.

Another way to cache is termed as a Routing request, in which the router matches the route and then the route handles the request. 

Three ways are available for matching a request using:

• String
• a regular expression
• a callback function. 

 

So, that’s all for the Headless PWA for Magento 2 (Adobe Commerce). Furthermore, if still, you have any issues feel free to raise a ticket and let us know your views to make the module better https://webkul.uvdesk.com

Explore the Adobe Commerce Cloud development services by Webkul. You may also browse other quality Magento 2 extensions.